<template>

    <div class="second_block" v-if="visible">
      <div style="text-align: center;">
        <img src="/static/logo.png" style="width: 80px;height: 75px">
      </div>
      <el-divider></el-divider>
      <br>
      <div style="font-size: 17px;text-align: center;font-weight: bold;color: #000000;line-height: 30px;">{{script_1}}</div>
      <br>
      <div style="display:flex;">
        <div class="tagBox">
          <div v-for="(item,index) in form.gift_info" :key="index" class="tag" :ref="'tag'+index" >
            <el-button size="mini" class="buttonColor"  plain style="height: 95px;width: 105px;" @click="giftType(item,$event)">
              <img :src="item.image" alt="" width="75px" height="75px">
            </el-button>
          </div>
        </div>
      </div>
      <br>
      <br>
      <div style="text-align: center">
        <el-button type="info" plain style="width: 90px" @click="doBack" round>Preview</el-button>
        &nbsp;&nbsp;
        <el-button type="warning" style="width: 90px" @click="doCommentOn" round>Next</el-button>
      </div>
    </div>
</template>

<script>
export default {
  name: "gift-selection",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object,
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
      },
      // 提交状态
      loading: false,

      // 是否是修改
      isUpdate: false,
      script_1:'',
    };
  },
  methods : {
    //关闭页面
    handleClose(done) {
      done();
      this.$emit('handleClose');
    },
    setForm(form)
    {
      this.form = form;
    },
    setBuyerConfig(data)
    {
      this.script_1 = data.gift_select_page_script.script_1;
    },
    //返回上一级
    doBack()
    {
      this.$emit('doBack','');
    },
    //获取礼品类型
    giftType(gift,event)
    {
      document.getElementsByClassName('buttonColor').forEach((aa) => {
        aa.style.border='1px solid #DCDFE6';
    });


      let input = event.currentTarget
      input.style.border = "1px solid rgb(254, 137, 4)"

      this.form.gift_address_display=gift.address_display;
      this.form.gift_name=gift.name;
      this.form.gift_type_2=gift.gift_type;
      this.form.gift_email=gift.email;
      this.form.gift_image=gift.image;
      if (gift.address_display ===1 && this.form.gift_type_2 ===2){
        this.form.gift_type =1; //显示地址产品信息
      }else{
        this.form.gift_type =2;//不显示
      }
    },
    //判断评论页面
    doCommentOn()
    {
      //判断是否有选择礼品
      if (!this.form.gift_address_display){
        this.$message({type:'warning',message:'Please select a gift type',offset:160});
      }else{
        this.$emit('getGiftSelection',this.form);
      }

    }
  }
}
</script>

<style scoped>
.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width:80px;
  background: #409EFF;
  border: 3px solid #328ce9;
  color: white;
  box-sizing: border-box;
}
.tagBox{
  /*width:300px;*/
  overflow:auto;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display:flex;
  white-space: nowrap;
  position:relative;/**需要设置在盒子设置相对定位，不然offsetLeft会基于整个页面body */
}
.tagBox::-webkit-scrollbar {
  display: none;
}
.tagBox::-webkit-scrollbar {
  width: 0;
  background: 0 0;
}
.tag{
  width:100px;
  text-align:center;
  margin:7px;
  padding:5px 5px;
  /*background:white;*/
  flex-shrink: 0;
}
.tag.active{
  background:#67C23A;
  color:white;
}
</style>
